<script setup lang="ts">
import {ref} from "vue";
import { useRouter } from 'vue-router';
const activeIndex = ref('1')
const router = useRouter();
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  router.push(key)

}
</script>

<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
  >
    <el-menu-item index="0">

    </el-menu-item>
    <el-menu-item index="/home">首页</el-menu-item>
    <el-sub-menu index="2">
      <template #title>关于</template>
      <el-menu-item index="/setting">设置</el-menu-item>
<!--      <el-menu-item index="2-2">item two</el-menu-item>-->
<!--      <el-menu-item index="2-3">item three</el-menu-item>-->
<!--      <el-sub-menu index="2-4">-->
<!--        <template #title>item four</template>-->
<!--        <el-menu-item index="2-4-1">item one</el-menu-item>-->
<!--        <el-menu-item index="2-4-2">item two</el-menu-item>-->
<!--        <el-menu-item index="2-4-3">item three</el-menu-item>-->
<!--      </el-sub-menu>-->
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>

</style>